<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache,no-store, must-revalidate">
<meta http-equiv="Expires" content="0">
  <title>接龙结果统计</title>
  <style>
    /*base*/
body {
  background: #fff;
}

.btn {
  margin-top: 10px;
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}


.btn:focus {
  outline: none;
}

.todo-container {
  width: 440px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/*header*/
.todo-header textarea {
  width: 400px;
  height: 200px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
  margin-top: 10px;
}

.todo-header textarea:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}


  </style>
</head>
<body>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <div class="todo-header">
        <textarea id="text1" type="text" placeholder="请输入需要查询的内容(如接龙)"></textarea>

      </div>
      <div class="todo-header">
        <textarea  id="text2" type="text" placeholder="请输入名册,每个名字空格或者回车换行隔开,例:小明 小王">蔡佳睿 曾芷晴 陈颖瑜 冯康良 付逸帆 胡羽霏 黄安琪 黄弘基 赖文昊 李宝仪 李辰 李嘉豪 李美慧 廖秋雨 廖羽 林慕儿 龙萱 陆蕾 彭浩轩 彭子淇 秦明皓 覃佳果 王玥 吴俊城 肖皓宇 严国瑞 杨佳慧 杨铁晨 杨艺洁 杨喻荀 余林烽 湛凯文 张华宇 张家瑞 张意坪 张羽萱 赵睿涵 郑露星 周梓辰 朱昭菲 邹智皓 陈心晴 李浩诚</textarea>
      </div>
      <div class="todo-footer">
        <button onclick="getUsers()" class="btn">获取结果</button>
        <!-- <button onclick="downloadTextFile()" class="btn">更新名册</button> -->
      </div>
      <div class="todo-header">
        <textarea type="text" id="text3" readonly="true" placeholder="文字统计清单"></textarea>
      </div>
    </div>
  </div>
</div>

<script>
function getUsers(){
  let text1=document.getElementById('text1').value;
  let text2=document.getElementById('text2').value;
  let Users=text2.split(/[\s\n]/).filter(user=>{
    if(user==='') return false;
   return true;
  });
  let User3=[];
  let Users1=Users.filter(user=>{
    if(text1.indexOf(user)!=-1) {   User3.push(user);return false}
    return true;
  })
  let User2=Users1.filter(user=>{
    if(user.length>=3){
      if(text1.indexOf(user.substring(user.length-2,user.length))!=-1){
        User3.push(user);
        return false;
      }
    }
      return true;
  })
  document.getElementById('text3').value=`名册共计${Users.length}人,\n未找到${User2.length}人,名单如下:\n${User2.toString()}\n\n找到${User3.length}人,名单如下:\n${User3.toString()}`;
}

</script>
</body>
</html>
